<template>
  <div class="amap-page-container houseMap">
    <h3 class="address" align="center">{{title}}</h3>
      <el-amap
        vid="amapDemo"
        :center="setCenter"
        :amap-manager="amapManager"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker v-for="(marker, index) in markers"
        :key="marker.key"
        :position="marker.position"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :vid="index"
        :topWhenClick="true"></el-amap-marker>
      </el-amap>
      </el-amap>
      <p class="address">
        <img src="@/assets/images/addr@2x.png" width="10" alt="">
        {{address}}
      </p>
    </div>
</template>


  <script>
  // NPM 方式
  // import { amapManager } from 'vue-amap';
  import AMap from 'AMap'
  import VueAMap from 'vue-amap';
  let amapManager = new VueAMap.AMapManager();
    export default {
      name: "",
      // props: ['lng','lat','address','title'],
      data: () => ({
        amapManager,
        zoom: 12,
        mapLng:'',
        mapLat:'',
        center: [],
        markers:[],
        lng:'',
        lat:'',
        address:'',
        title:'',
      }),
      mounted(){
        let that = this;
        that.lng = that.$route.query.lng;
        that.lat = that.$route.query.lat;
        that.address = that.$route.query.address;
        that.title = that.$route.query.title;
        this.$nextTick(() => {

            this.mapLng = this.lng;
            this.mapLat = this.lat;
            let marker = new AMap.Marker({
                position:[that.mapLng,that.mapLat]
            });

          this.center = [this.lng,this.lat];
          console.log('mapLng='+that.mapLng+',mapLat='+that.mapLat);
          console.log(marker.getPosition());
          that.markers = [{
            position: that.center,
            events: {
              click: (e) => {
                console.log(marker.getPosition());
                marker.markOnAMAP({
                    position: marker.getPosition(),
                    name:that.title//name属性在移动端有效
                });
                // marker.setLabel({
                //     offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
                //     content: "点击Marker打开高德地图"
                // });
              },

            },
            visible: true,
            draggable: false,

            // template: '<span>1</span>',
          }];

        });
     },
     computed: {
       setCenter () {
         return this.center = [this.lng,this.lat];
       }
     },
     created() {
       //do something after creating vue instance

     },
     updated() {
       //do something after updating vue instance
       let that = this;
       this.$nextTick(() => {
         console.log(this.lng);

       });

     },
      methods: {

      }
    }
    function init() {
        let map = new AMap.Map("mapContainer", {
            zoom: 18,
            center:[116.473188,39.993253]
        });
        let marker = new AMap.Marker({
            map:map,
            position:[116.473188,39.993253]
        })
        marker.setLabel({
            offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
            content: "点击Marker打开高德地图"
        });
        marker.on('click',function(e){
            marker.markOnAMAP({
                name:'首开广场',
                position:marker.getPosition()
            })
        })
        map.addControl(new AMap.ToolBar());
        if(AMap.UA.mobile){
            document.getElementById('button_group').style.display='none';
        }
    }
</script>

<style lang="scss" scoped>
.houseMap{
  height: 85vh;
}
.address{
  padding: 10px;
}
.amap-page-container {
    // height: 240px;
    padding-bottom: 30px;
  }
</style>
